<template>
	<div class="frame-body">
  <div class="container">
	  <div class="left-menu">
		  <div class="left-menu-stage">
			  <div class="left-menu-scene">
		  <div class="menu-title">
			  <span>项目管理</span>
		  </div>
		  <div class="menu-list">
		  <a-menu
				  style="width: 208px;background-color:#efefef;"
				  :default-selected-keys="['1']"
				  :open-keys.sync="openKeys"
				  mode="inline"
				  @click="handleClick"
		  >
			  <a-menu-item key="sub1" @titleClick="titleClick"><div class="nav-title">概况</div></a-menu-item>

			  <a-menu-item key="sub2" @titleClick="titleClick"><div class="nav-title">回收站</div></a-menu-item>

			  <a-menu-item key="sub3" @titleClick="titleClick"><div class="nav-title">待处理事件</div></a-menu-item>

			  <a-menu-item key="sub4" @titleClick="titleClick"><div class="nav-title">事件历史记录</div></a-menu-item>
		  </a-menu>
	  </div></div></div></div>
	  <div class="right-container">
		  <div class="right-container-stage">
			<sub-app>
				<a-alert style="margin:8px 16px;text-align:left;" message="提示用的文字区域" type="info" close-text="x" />
				<div class="page-body">
					<a-tabs default-active-key="1" @change="callback" size="small">
						<a-tab-pane key="1" tab="概览">
							<div class="overview">
								<div class="dashboard-main">
									<div class="todo-center-card" style="display:flex;">
									<a-card  :loading="demoLoading">
										<div class="card-content">
											<div class="todoCenterCard">

											</div>
										</div>
									</a-card></div>

									<a-card title="我的项目">
										<div class="btn_grp" slot="extra">
											<a-dropdown>
												<a-menu slot="overlay" @click="handleMenuClick">
													<a-menu-item key="1">
														1st item
													</a-menu-item>
													<a-menu-item key="2">
														2nd item
													</a-menu-item>
													<a-menu-item key="3">
														3rd item
													</a-menu-item>
												</a-menu>
												<a-button type="link"> 更多操作 <a-icon type="down" /> </a-button>
											</a-dropdown>
											<a-button shape="circle" type="link" icon="loading-3-quarters" />
										</div>
										<div class="card-content">
											<div class="my-project-head">
												<div style="width:70%">
													<a-input-search></a-input-search>
												</div>
												<div style="white-space: nowrap; margin-left: 16px;">
													<a-button type="primary" @click="showDrawer()">
														创建项目
													</a-button>
												</div>
											</div>
										<a-table
												:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
												:columns="columns"
												:data-source="data"
										>
		<span slot="action" slot-scope="text, record">
			<a-button size="small" style="margin-right: 10px;" type="primary">
			  审核
			</a-button>
			<a-button size="small" style="margin-right: 10px;" type="danger">
			  删除
			</a-button>
			<a-button size="small" style="margin-right: 10px;" type="default">
			  查看
			</a-button>
		</span>
										</a-table>
										</div>
									</a-card>

								</div>
								<aside class="dashboard-side"></aside>
							</div>
						</a-tab-pane>
						<a-tab-pane key="2" tab="资源查看"></a-tab-pane>
					</a-tabs>
				</div>
			</sub-app>
		  </div>

	  </div>
		  <a-drawer
	      title="Create a new account"
	      :width="720"
	      :visible="visible"
	      :body-style="{ paddingBottom: '80px' }"
	      @close="onClose"
	    >
		<a-steps :current="0" size="small">
		    <a-step title="基础信息" />
		    <a-step title="补充信息" />
		    <a-step title="验证信息" />
		  </a-steps>
	      <a-form :form="form" layout="vertical" hide-required-mark>
	        <a-row :gutter="16" style="margin-top: 20px;">
	          <a-col :span="12">
	            <a-form-item label="项目名称">
	              <a-input
	                v-decorator="[
	                  'name',
	                  {
	                    rules: [{ required: true, message: '请输入项目名称' }],
	                  },
	                ]"
	                placeholder="请输入项目名称"
	              />
	            </a-form-item>
	          </a-col>
	          <a-col :span="12">
			  <!-- :default-value="['a1', 'b2']" -->
	            <a-form-item label="项目督导人员">
	             <a-select mode="tags" style="width: 100%" :token-separators="[',']" @change="handleChange">
	                 <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
	                   人员{{ i }}
	                 </a-select-option>
	               </a-select>
	            </a-form-item>
	          </a-col>
	        </a-row>
	        <a-row :gutter="16">
<a-col :span="12">
	            <a-form-item label="项目编码">
	              <a-input
	                v-decorator="[
	                  'name',
	                  {
	                    rules: [{ required: true, message: '请输入项目编码' }],
	                  },
	                ]"
	                placeholder="请输入项目编码"
	              />
	            </a-form-item>
	          </a-col>
	          <a-col :span="12">
	          <!-- :default-value="['a1', 'b2']" -->
	                <a-form-item label="准入机构行政人员">
	                 <a-select mode="tags" style="width: 100%" :token-separators="[',']" @change="handleChange">
	                     <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
	                       人员{{ i }}
	                     </a-select-option>
	                   </a-select>
	                </a-form-item>
	              </a-col>
	        </a-row>
	        <!-- <a-row :gutter="16">
	          <a-col :span="12">
	            <a-form-item label="Approver">
	              <a-select
	                v-decorator="[
	                  'approver',
	                  {
	                    rules: [{ required: true, message: 'Please choose the approver' }],
	                  },
	                ]"
	                placeholder="Please choose the approver"
	              >
	                <a-select-option value="jack">
	                  Jack Ma
	                </a-select-option>
	                <a-select-option value="tom">
	                  Tom Liu
	                </a-select-option>
	              </a-select>
	            </a-form-item>
	          </a-col>
	          <a-col :span="12">
	            <a-form-item label="DateTime">
	              <a-date-picker
	                v-decorator="[
	                  'dateTime',
	                  {
	                    rules: [{ required: true, message: 'Please choose the dateTime' }],
	                  },
	                ]"
	                style="width: 100%"
	                :get-popup-container="trigger => trigger.parentNode"
	              />
	            </a-form-item>
	          </a-col>
	        </a-row> -->
	        <a-row :gutter="16">
	          <a-col :span="24">
	            <a-form-item label="项目周期">
	              <a-range-picker
								 v-decorator="[
								   'dateTime',
								   {
								     rules: [{ required: true, message: '请选择项目周期' }],
								   },
								 ]"
								 @change="onChange" />
	            </a-form-item>
	          </a-col>
	        </a-row>
	      </a-form>
	      <div
	        :style="{
	          position: 'absolute',
	          right: 0,
	          bottom: 0,
	          width: '100%',
	          borderTop: '1px solid #e9e9e9',
	          padding: '10px 16px',
	          background: '#fff',
	          textAlign: 'right',
	          zIndex: 1,
	        }"
	      >
	        <a-button :style="{ marginRight: '8px' }" @click="onClose">
	          取消
	        </a-button>
	        <a-button type="primary" @click="onClose">
	          下一步
	        </a-button>
	      </div>
	    </a-drawer>
  </div></div>
</template>
<script>
import Vue from 'vue'
const columns = [
  {
    title: '项目标题',
    dataIndex: 'name',
  },
  {
    title: '督导人员',
    dataIndex: 'age',
  },
  {
    title: '创建时间',
    dataIndex: 'address',
  },
	{
	  title: '操作',
	  key: 'action',
	  scopedSlots: { customRender: 'action' },
	},
];

const data = [];
for (let i = 0; i < 20; i++) {
	if(i==2){
	  data.push({
		key: i,
		name: `附带子内容的 项目标题 ${i}`,
		age: '个案',
		address: `2020年八月八日`,
		children:[{
			key: 211,
			name: `这是项目里面的第一个社工创建`,
			age: '个案',
			address: `2020年八月八日`,
		},{
			key: 212,
			name: `这是项目里面的第二个社工创建`,
			age: '咨询',
			address: `2020年八月八日`,
		}]
	  });
	}else{
		data.push({
		  key: i,
		  name: `这是项目标题 ${i}`,
		  age: '个案',
		  address: `2020年八月八日`,
		});
	}
}
const sourceData = [
  // input基本使用
  {
    title: '输入框',
    dataIndex: 'name',
    width: 200,
    fixed: 'left',
    formOptions: {
      el: 'input',
      allowClear: true
    }
  },
  // input.search
  {
    title: '搜索框',
    dataIndex: 'input2',
    formOptions: {
      el: 'input.search'
    }
  },
  {
    title: '自定义',
    dataIndex: 'input3',
    formOptions: {
      el: 'input'
    }
  },
  // 同步select值
  {
    title: '下拉框',
    className: 'select',
    dataIndex: 'select',
    formOptions: {
      el: 'select',
      options: [
        {
          label: 'John Brown',
          value: 'John Brown',
          disabled: true
        },
        {
          label: 'artiely',
          value: 'artiely'
        }
      ]
    }
  },
  // 异步select值
  {
    title: '异步下拉框',
    className: 'selectAsync',
    dataIndex: 'selectAsync',
    formOptions: {
      el: 'select',
      options: [
      ]
    }
  },
  {
    title: '输入框',
    dataIndex: 'address',
    formOptions: {
      el: 'input'
    }
  },
  {
    title: '单选框',
    dataIndex: 'radio',
    formOptions: {
      el: 'radio',
      options: [
        {
          label: 'John Brown',
          value: 'John Brown',
          disabled: true
        },
        {
          label: 'artiely',
          value: 'artiely'
        }
      ]
    }
  },
  {
    title: '开关',
    dataIndex: 'switch',
    formOptions: {
      el: 'switch',
      checkedChildren: '开',
      unCheckedChildren: '关'
    }
  },
  {
    title: '复选框',
    dataIndex: 'checkbox',
    formOptions: {
      el: 'checkbox',
      options: [
        { label: 'Apple', value: 'Apple' },
        { label: 'Pear', value: 'Pear' },
        { label: 'Orange', value: 'Orange' }
      ]
    }
  },
  {
    title: '日期',
    dataIndex: 'datepicker',
    formOptions: {
      el: 'datepicker',
      options: {}
    }
  },
  {
    title: '时间',
    dataIndex: 'timepicker',
    formOptions: {
      el: 'timepicker',
      options: {}
    }
  },
  {
    title: '级联',
    dataIndex: 'cascader',
    formOptions: {
      el: 'cascader',
      options: [{
        value: 'zhejiang',
        label: 'Zhejiang',
        children: [{
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [{
            value: 'xihu',
            label: 'West Lake'
          }]
        }]
      }, {
        value: 'jiangsu',
        label: 'Jiangsu',
        children: [{
          value: 'nanjing',
          label: 'Nanjing',
          children: [{
            value: 'zhonghuamen',
            label: 'Zhong Hua Men'
          }]
        }]
      }]
    }
  },
  {
    title: '星级',
    dataIndex: 'rate',
    formOptions: {
      el: 'rate'
    }
  },
  {
    title: '文本域',
    dataIndex: 'textarea',
    formOptions: {
      el: 'textarea'
    }
  },
  {
    title: '滑块',
    dataIndex: 'slider',
    formOptions: {
      el: 'slider'
    }
  },
  {
    title: '上传',
    dataIndex: 'upload',
    formOptions: {
      el: 'upload',
      // 上传地址
      action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76'
    }
  },
  {
    title: '树',
    dataIndex: 'tree',
    formOptions: {
      el: 'tree',
      options: [{
        title: 'parent 1',
        key: '0-0',
        slots: {
          icon: 'smile'
        },
        children: [
          { title: 'leaf', key: '0-0-0', slots: { icon: 'meh' } },
          { title: 'leaf', key: '0-0-1', scopedSlots: { icon: 'custom' } }]
      }]
    }
  }
]
const layout = Vue.observable({
  // 响应式断点设置
  breakPoint: 'lg',
  // 是否小屏
  isMobile: false,
  // 菜单是否折叠
  isCollapse: false,
  // 布局模式 flow fixed
  layoutMode: 'flow',
  // 当前选择的布局
  layoutShap: 'layout1',
  // 是否展示标签页
  isNavTabs: true,
  // 菜单的主题
  menuTheme: 'dark',
  // 默认字体大小(不建议修改)
  fontSize: 16,
  // 菜单折叠的宽度
  collapsedWidth: 80,
  //  菜单的宽度
  menuWidth: 240,
  //  刷新当前页使用
  homeReload: true,
  // 这个应用重置
  appReload: true,
  // 标签页的高度
  navTabsHeight: 45,
  // 标签页的样式
  navTabsShap: 'card',
  // 头部的高度
  headerHeight: 64,
  // 菜单收起的动画和时间
  layoutTransition: 'all 0.2s'
})
export default {
  data() {
    return {demoLoading:true,
    	current: ['mail'],
		openKeys: ['sub1'],
      data,
      columns,
      sourceData,
	  form: this.$form.createForm(this),
	visible: false,
	  start:'',
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
	  defaultData: {
	    name: '这是一个基本输入框',
	    input2: '这是一个搜索输入框',
	    input3: '这是一个完全自定义的输入框',
	    select: '这是一个基本输入框',
	    selectAsync: '这是一个异步数据输入框',
	    address: 'New York No. 1 Lake Park',
	    radio: 'artiely',
	    switch: true,
	    checkbox: [],
	    datepicker: '2019/10/20',
	    timepicker: '23:59:59',
	    cascader: ['zhejiang', 'hangzhou', 'xihu'],
	    rate: 3,
	    textarea: '这是一个文本域',
	    slider: 30,
	    upload: [{
	      uid: '-1',
	      name: 'xxx.png',
	      status: 'done',
	      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
	    }],
	    tree: []
	  }
    };
  },
	watch:{
		openKeys(val) {
			console.log('openKeys', val);
		},
	},
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  methods: {
	 showDrawer() {
	      this.visible = true;
	    },
	    onClose() {
	      this.visible = false;
	    },
	  handleClick(e) {
		  console.log('click', e);
	  },
	  titleClick(e) {
		  console.log('titleClick', e);
	  },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
  },
};
</script>


<style>
	.frame-body {
		position: absolute;
		left:0px;
		right:0px;
		top:50px;
		background-color: #000;
		z-index: 100;
		width:auto;
		bottom: 0px;
	}
	.container {
		width: auto;
		position: absolute;
		top: 0px;
		left: 0px;
		bottom: 0px;
		right: 0px;
		overflow: hidden;
		background: #FFF;
	}
	.left-menu{
		transition: all 0.2s ease;
		overflow: hidden;
		z-index: 2;
		top:0px;
		bottom: 0px;
		position: absolute;
		float: left;
		width: 208px;
		background: #f5f5f5;
	}
	.left-menu .left-menu-stage {
		width: 208px;
		overflow: hidden;
		position: absolute;
		top: 0px;
		bottom: 0px;
		right:0px;
	}
	.left-menu .left-menu-stage .left-menu-scene {
		position: absolute;
		width: 208px;
		left: 0px;
		top: 0px;
		bottom: 0px;
		transition: position,.2s,linear;
	}
	.left-menu .left-menu-stage .menu-title {
		background: #F5F5F5;
		height: 48px;
		line-height: 48px;
		font-size: 14px;
		text-indent: 16px;
		border-bottom: 1px solid #DEDEDE;
		font-weight: 500;
	}
	.left-menu .menu-list {
		position: absolute;
		top: 48px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.left-menu .menu-list ul {
		padding-bottom:72px;
		list-style: none;
		padding:0;margin:0;
	}
	.left-menu .left-menu-stage .menu-list ul .ant-menu-item {
		padding:0px!important;
		font-size: 12px!important;

	}
	.left-menu .left-menu-stage .menu-list ul .nav-title {
		float: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-left:16px;
		width:auto;
	}
	.right-container {
		position: absolute;
		width:auto;
		top:0px;
		left:208px;
		bottom: 0px;
		right:0px;
		overflow:auto;
		background:rgb(250,250,250);
		transition: all 0.2s ease;
	}
	.right-container .right-container-stage {
		background: #fafafa;
		width: 100%;
		min-height: 100%;
	}
	.right-container .right-container-stage sub-app {
		display: block;
		margin:0;
		font-size: 12px!important;
		line-height: 20px!important;
		color:#111;
		min-height: calc(100vh - 50px);
		min-height: -webkit-calc(100vh - 50px);
		min-height: -moz-calc(100vh - 50px);
	}
	.page-body {
		padding: 0px 16px;
		position:relative;
	}
	.page-body .overview {
		display: flex;
		min-height: 300px;
	}
	.page-body .overview .dashboard-main {
		-webkit-box-flex: 1;
		-webkit-flex-grow: 1;
		-moz-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
		padding-right: 8px;
	}
	.lst-card {
		min-width: 100px;
		padding:0 16px;
		border-radius: 0;
		background: #fff;
		border:1px solid transparent;
		box-shadow: 0 1px 4px 0 rgba(0,0,0,0.13);
		margin-bottom: 16px;
	}
	.lst-card .lst-card-head {background:#fff;}
	.lst-card .lst-card-head-main {position: relative;height:24px;line-height: 24px;margin-top: 16px!important;margin-bottom: 16px!important;}

	.lst-card .lst-card-head-main .lst-card-title {
		display: inline-block;
		overflow: hidden;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 80%;
		height: 100%;
		color: #333;
		font-size: 14px;
		font-weight: 400!important;
	}
	.page-body .overview .dashboard-side {
		width:320px;
		padding-left: 8px;
	}
	.ant-card {
		min-width:100px;
		padding:0 16px!important;
		border-radius: 0!important;
		border:1px solid transparent!important;
		margin-bottom:16px!important;
		width:100%;
		box-shadow: 0 1px 4px 0 rgba(0,0,0,0.13);
	}
	.ant-card-head {border-bottom:none!important;;}
	.ant-card-head-title,.ant-card-extra {
		padding:8px 0;
	}
	.ant-card-body {
		padding:0!important;
		margin-bottom: 16px;
	}
	.ant-card-body .card-content {
		overflow: hidden;
		-webkit-transition: all .3s cubic-bezier(.23,1,.32,1);
		-o-transition: all .3s cubic-bezier(.23,1,.32,1);
		-moz-transition: all .3s cubic-bezier(.23,1,.32,1);
		transition: all .3s cubic-bezier(.23,1,.32,1);
		position: relative;
		margin-bottom: 16px;
	}
	.ant-card-body .ant-card-loading-content {
		padding-top: 16px;
	}
	.ant-card-body .card-content .todoCenterCard {
		height:150px;
		padding-top:16px;
		display: flex;
		-webkit-box-align: center;
		align-items: center;
		justify-content: space-around;
	}
	.ant-card-body .card-content .my-project-head {margin-bottom: 16px;
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-moz-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;}
.create-form-drawer .ant-drawer-body{
  height: calc(100vh - 100px) ;
}
.create-form-drawer .ant-drawer-content-wrapper{
  height: 100vh;
  overflow: hidden
}
</style>
